<template>
    <div class="head">
        <header>
            <div class="box1">
                ·————<span>小编精选</span> ————·
            </div>
            <div class="box2">
                <div class="img">
                    <h2>CHANEL</h2>
                    <p>查看更多 ></p>
                </div>
                <img src="http://pic1.ymatou.com/G02/M07/86/1B/CgvUBVvrzheAQTFDAAH0yCAeoYw144_15_8_w_o.jpg" alt="">
            </div>
            <div class="box3">
                ·————<span>洋货集</span> ————·
            </div>
            <div class="box4">
                <ul>
                    <li>
                        <img src="http://s1.ymatou.com/homem/images/yhj_pic2-ba37cf91db.png" alt="">
                        <p>
                            靓包潮鞋
                            <span>Shoe&bag</span>
                        </p>
                    </li>
                    <li>
                        <img src="http://s1.ymatou.com/homem/images/yhj_pic4-0af2cca806.png" alt="">
                        <p>
                            服装配饰
                            <span>Clothing</span>
                        </p>
                    </li>
                    <li>
                        <img src="http://s1.ymatou.com/homem/images/yhj_pic3-505214cb4f.png" alt="">
                        <p>
                           美艳护肤
                            <span>Skin care</span>
                        </p>
                    </li>
                    <li>
                        <img src="http://s1.ymatou.com/homem/images/yhj_pic5-2702ebb41f.png" alt="">
                        <p>
                            生活家
                            <span>Living home</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="box5">
                ·————<span>猜你喜欢</span> ————·
            </div>
            <Main></Main>
        </header>

    </div>
</template>

<script>
import Main from './Main'
export default {
    components:{
        Main
    }
}
</script>

<style lang="scss" scoped>
.head {
    width: 100%;
    height: 100%;

    .box1,
    .box3,.box5 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        color: #CCCCCC;

        span {
            color: black;
        }
    }

    .box2 {
        width: 92%;
        height: 400px;
        background-color: #fff;
        position: relative;
        padding: 30px;

        .img {
            position: absolute;
            left: 30px;
            top: 30px;

            // padding:0 30;
            background-color: black;
            width: 92%;
            height: 400px;
            opacity: 0.5;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            flex-direction: column;

            p {
                width: 200px;
                height: 60px;
                border: 1px solid #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 40px;
                font-size: 30px;
            }
        }

        img {
            // position: absolute;
            width: 100%;
            height: 100%;
        }
    }
    .box4{
        width: 100%;
        height: 400px;
        background-color: #fff;
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            li{
                width: 48%;
                height: 180px;
                margin: 10px 0;
                background-color: #F7F7F5;
                display: flex;
                justify-content: space-around;
                align-items: center;
                img{
                    text-align: center;
                        width: 140px;
                        height: 140px;
                    }
                p{
                    font-size: 30px;
                    span{
                        font-size: 26px;
                        color: #CCCCCC;
                    }
                }
            }
        }
    }
}
</style>